<!--
 * @Author: ljc
 * @Date: 2023-05-04 20:57:20
 * @LastEditors: g05047
 * @LastEditTime: 2023-05-10 09:33:08
 * @Description: 评审任务详情
-->
<template>
  <rk-dialog fullscreen
    title="评审任务详情"
    :visible="visible"
    :destroyOnClose="true"
    @close="visible = false"
    :maskClosable="false"
    :showFooter='false'>
    <div style="height: 100%;">
      <el-tabs v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane label="基本信息"
          name="first">
          <task-detaile-base ref="taskDetileBaseViewRef"
            :taskDetaileData="taskDetaileData"
            :is-disabled="true"></task-detaile-base>
        </el-tab-pane>
        <el-tab-pane label="项目列表"
          name="second">
          <task-detaile-project :taskDetaileData="taskDetaileData"></task-detaile-project>
        </el-tab-pane>
        <el-tab-pane label="专家列表"
          name="third">
          <task-detaile-expert :expertList="expertList"></task-detaile-expert>
        </el-tab-pane>
        <el-tab-pane label="规则列表"
          name="fourth">
          <task-detaile-rule :ruleList="ruleList"></task-detaile-rule>
        </el-tab-pane>
      </el-tabs>
    </div>
  </rk-dialog>
</template>
  <script setup>
import { reviewtaskGetData } from '@/api/api-expert.js'
import TaskDetaileBase from "./components/TaskDetaileBase.vue";
import TaskDetaileExpert from "./components/TaskDetaileExpert.vue";
import TaskDetaileProject from "./components/TaskDetaileProject.vue";
import TaskDetaileRule from "./components/TaskDetaileRule.vue";
import { ElMessage } from "element-plus"
import { reactive, ref } from 'vue';

const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
let taskDetaileData = reactive({})
const expertList = ref([])
const ruleList = ref([])
const activeName = ref('first')
const tableHeight = ref(0)
tableHeight.value = 'calc(100% - 100px)'

const handleClick = (tab, event) => {
  console.log(tab, event)
}
const visible = ref(false)
// 获取数据
const loadFormData = async (params) => {
  const result = await reviewtaskGetData(params)
  const { code, msg, data } = result
  if (code === 200) {
    taskDetaileData.value = data
    expertList.value = data.expertList ?? []
    ruleList.value = data.ruleList ?? []
  } else {
    ElMessage.error(msg ?? '业务失败')
  }
}
/** 打开弹出层 */
const handleOpen = (value) => {
  visible.value = true
  loadFormData(value)
}
/** 关闭弹窗 */
const hanldeClose = () => {
  visible.value = false
}

/** 确认提交 */
const handleConfirm = () => {
  visible.value = false
}
// 对外暴露方法
defineExpose({
  handleOpen
})

  </script>
<style lang="scss" scoped>
.operation-box {
  display: flex;
  justify-content: space-around;
}
.mr-15px {
  margin-right: 15px;
  &:last-child {
    margin-right: 0;
  }
}
.w-200px {
  width: 200px;
}
// :deep(.el-tabs__nav-scroll) {
//   background-color: #e3f2fe;
// }
:deep(.el-tab-pane) {
  height: calc(100vh - 120px);
  overflow-y: auto;
}
</style>
      